<template>
  <div class="import-address bg-gray">
    <div class="bg-white"></div>
    <div style="">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="new_import w1200">
        <el-tab-pane :label="$t('importAddress.importAddress0')" name="newAddress" :disabled="resetAddress !=='0'">
          <div class="new_address">
            <el-form :model="newAddressForm" status-icon :rules="newAddressRules" ref="newAddressForm"
                     class="w630">
              <el-form-item :label="$t('newAddress.newAddress6')" prop="pass">
                <el-input type="password" v-model="newAddressForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item :label="$t('newAddress.newAddress7')" prop="checkPass">
                <el-input type="password" v-model="newAddressForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="" prop="agreement">
                <el-checkbox-group v-model="newAddressForm.agreement">
                  <el-checkbox :label="$t('newAddress.newAddress8')" name="agreement"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item class="form-bnt">
                <el-button type="success" @click="newAddressSubmitForm('newAddressForm')">
                  {{$t('importAddress.importAddress0')}}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('importAddress.importAddress2')" name="keystoreImport" :disabled="resetAddress !=='0'">
          <div class="tc upload_keystore">
            <el-upload drag class="upload" action="localhost" accept='.keystore' v-if="!isfileReader"
                       :before-upload="handleUpload"
                       :multiple="false"
                       :limit="1">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">{{$t('importAddress.importAddress4')}}<em>{{$t('importAddress.importAddress41')}}</em>
              </div>
            </el-upload>
            <div v-else>{{$t('importAddress.importAddress42')}}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('importAddress.importAddress3')" name="keyImport">
          <div class="tab w1200 mt_30">
            <div class="tc font18 mzt_20" v-if="resetAddress !=='0'">
              {{$t('public.resetAddress')}}: {{resetAddress}}
            </div>
            <el-form :model="importForm" :rules="importRules" ref="importForm" status-icon class="import-form w630">
              <el-form-item :label="$t('importAddress.importAddress5')" prop="keys">
                <el-input type="textarea" v-model.trim="importForm.keys" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item :label="$t('newAddress.newAddress6')" prop="pass">
                <el-input v-model="importForm.pass" type="password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item :label="$t('newAddress.newAddress7')" prop="checkPass">
                <el-input v-model="importForm.checkPass" type="password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item class="form-bnt">
                <el-button type="success" @click="keyImport('importForm')">{{$t('importAddress.importAddress8')}}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane :label="$t('tips.tips10')" name="scanImport">
          <div class="scan tc">
            <div id="qrcode" class="qrcode"></div>
            <div class="font12" style="margin: 20px 0 0 0">
              {{$t('tips.tips18')}}
              <span class="click td" @click="toUrl('http://nabox.io/',1)">Nabox</span>
              /
              <span class="click td" @click="toUrl('https://www.denglu1.cn/',1)">{{$t('tips.tips11')}}</span>
              {{$t('tips.tips19')}}
            </div>
          </div>
        </el-tab-pane> -->
        
      </el-tabs>
    </div>
    <Password ref="password" @passwordSubmit="keystoreImportPassSubmit">
    </Password>
  </div>
</template>

<script>
  import nuls from 'nuls-sdk-js'
  import tronWeb from 'tronweb'
  import QRCode from 'qrcodejs2'
  import {
    chainID,
    defaultAddressInfo,
    localStorageByAddressInfo,
    passwordVerification,
    getRamNumber,
    timesDecimals,
    Plus,
    connectToExplorer
  } from '@/api/util'
  import {getPrefixByChainId} from '@/api/requestData'
  import Password from '@/components/PasswordBar'

  export default {
    data() {
      let validateKeys = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('importAddress.importAddress9')));
        } else if (value.length < 60 || value.length > 66) {
          callback(new Error(this.$t('importAddress.importAddress91')));
        } else {
          callback();
        }
      };
      let validatePass = (rule, value, callback) => {
        let patrn = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/;
        if (value === '') {
          callback(new Error(this.$t('newAddress.newAddress22')));
        } else if (!patrn.exec(value)) {
          callback(new Error(this.$t('newAddress.newAddress23')));
        } else {
          if (this.importForm.checkPass !== '') {
            this.$refs.importForm.validateField('validateCheckPass');
          }
          callback();
        }
      };
      let validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('newAddress.newAddress24')));
        } else if (value !== this.importForm.pass) {
          callback(new Error(this.$t('newAddress.newAddress25')));
        } else {
          callback();
        }
      };

      let validateNewPass = (rule, value, callback) => {
        let patrn = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/;
        if (value === '') {
          callback(new Error(this.$t('newAddress.newAddress22')));
        } else if (!patrn.exec(value)) {
          callback(new Error(this.$t('newAddress.newAddress23')));
        } else {
          if (this.newAddressForm.checkPass !== '') {
            this.$refs.newAddressForm.validateField('validateNewCheckPass');
          }
          callback();
        }
      };
      let validateNewCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('newAddress.newAddress24')));
        } else if (value !== this.newAddressForm.pass) {
          callback(new Error(this.$t('newAddress.newAddress25')));
        } else {
          callback();
        }
      };
      let validateAgreement = (rule, value, callback) => {
        if (!value) {
          callback(new Error(this.$t('newAddress.newAddress29')));
        } else {
          callback();
        }
      };
      return {
        activeName: 'newAddress',//tab选中
        prefix: 'aaaaa',//地址前缀
        isfileReader: typeof FileReader === "undefined",//浏览器是否支持FileReader
        keystoreInfo: {},//keystore导入文本信息
        resetAddress: this.$route.query.address ? this.$route.query.address : '0',//重置密码地址
        importForm: {
          keys: '',
          pass: '',
          checkPass: ''
        },
        importRules: {
          keys:
            [
              {validator: validateKeys, trigger: 'blur'}
            ],
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validateCheckPass, trigger: 'blur'}
          ]
        },
        importAddressInfo: {},//私钥导入地址信息
        importRandomString: '',//扫描导入随机字符串

        newAddressForm: {
          pass: '',
          checkPass: '',
          agreement: false
        },
        newAddressRules: {
          pass: [
            {validator: validateNewPass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validateNewCheckPass, trigger: 'blur'}
          ],
          agreement: [
            {validator: validateAgreement, trigger: 'blur'}
          ],
        },
        newAddressInfo: {},//创建地址信息
        scanImportInterval: null,
      };
    },
    components: {
      Password
    },
    created() {
      getPrefixByChainId(chainID()).then((response) => {
        // console.log('地址前缀',response)
        // this.prefix = response
      }).catch((err) => {
        console.log(err);
        this.prefix = '';
      });
      this.activeName = this.resetAddress !== '0' ? 'keyImport' : 'keystoreImport';
    },
    mounted() {
      // let chainId = 3; //链ID 1:NULS主网 2：NULS测试网 3以上其他链
      // let passWord = "";
      // let prefix = "ATR"; //链前缀

      // //创建地址
      // const newAddress = nuls.newAddress(chainId, passWord, prefix);
      // console.log('atr1',newAddress);

      // //导入地址
      // const key ="";
      // const importAddress = nuls.importByKey(chainId, key, passWord,prefix);
      // console.log('atr2',importAddress);

      // console.log('sssss',tronWeb.address.fromPrivateKey('6881f2334e9a07f0067265983d8578001d3f9eb35dba763de3ca2038d23a1879'))

      // console.log('tohex',tronWeb.address.toHex('ATRWaaxUAV7fehiAuWjLXB5Mq8qpA2kpH7ka'))

      
      // this.ramNumber();
    },
    beforeDestroy() {
      clearInterval(this.scanImportInterval);
    },
    methods: {
      
      /**
       * @disc: 生成扫描登录的二维码
       * @date: 2019-12-02 16:38
       * @author: Wave
       */
      async ramNumber() {
        if (!this.importRandomString) {
          this.importRandomString = await getRamNumber(16);
        }
        let scanInfo = {
          url: localStorage.hasOwnProperty('url') ? JSON.parse(localStorage.getItem('url')).urls : 'https://beta.wallet.nuls.io/api',
          send: this.importRandomString,
        };
        console.log(this.importRandomString);
        let qrcode = new QRCode('qrcode', {
          width: 250,
          height: 250,
          colorDark: "#000000",
          colorLight: "#ffffff",
        });
        qrcode.makeCode(JSON.stringify(scanInfo))
      },

      /**
       * @disc: tab选择
       * @params: tab
       * @date: 2019-08-31 16:18
       * @author: Wave
       */
      handleClick(tab) {
        if (tab.name === 'keystoreImport') {
          this.importAddressInfo = {};
          this.newAddressInfo = {};
          this.$refs['importForm'].resetFields();
          this.$refs['newAddressForm'].resetFields();
        } else if (tab.name === 'keyImport') {
          this.keystoreInfo = {};
          this.newAddressInfo = {};
          this.$refs['newAddressForm'].resetFields();
        } else if (tab.name === 'scanImport') {
          this.scanImportInterval = setInterval(() => {
            this.getScanImport(this.importRandomString);
          }, 3000);
        } else {
          this.keystoreInfo = {};
          this.importAddressInfo = {};
          this.$refs['importForm'].resetFields();
        }
      },

      /**
       * @disc: 获取扫描导入后的信息
       * @params: importRandomString
       * @date: 2019-12-02 16:39
       * @author: Wave
       */
      async getScanImport(importRandomString) {
        await this.$post('/', 'getMsg', [importRandomString])
          .then((response) => {
            //console.log(response);
            if (response.hasOwnProperty("result")) {
              let addressInfo = {address: response.result.address, aesPri: '', pub: ''};
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },

      /**
       * @disc: 获取kestore信息
       * @params: file
       * @date: 2019-08-31 16:01
       * @author: Wave
       */
      handleUpload(file) {
        const reader = new FileReader();
        reader.addEventListener("load", () => {
          //console.log(JSON.parse(reader.result));
          this.keystoreInfo = JSON.parse(reader.result);
          this.keystoreInfo.pub = this.keystoreInfo.pubKey;
          this.keystoreInfo.aesPri = this.keystoreInfo.encryptedPrivateKey;
          this.$refs.password.showPassword(true);
        });
        reader.readAsText(file, "utf-8");
      },

      /**
       * @disc: keystore 导入密码框提交
       * @params: password
       * @date: 2019-09-02 10:49
       * @author: Wave
       */
      async keystoreImportPassSubmit(password) {
        if (password.length < 8) {
          this.$message({message: this.$t('address.address13'), type: 'error', duration: 3000});
          return;
        }
        let isPassword = passwordVerification(this.keystoreInfo, this.$md5(password), this.prefix);
        if (isPassword.success) {
          let keystoreAddressInfo = defaultAddressInfo;
          keystoreAddressInfo.address = isPassword.address;
          keystoreAddressInfo.aesPri = isPassword.aesPri;
          keystoreAddressInfo.pub = isPassword.pub;
          localStorageByAddressInfo(keystoreAddressInfo);
          this.toUrl('address')
        } else {
          this.$message({message: this.$t('address.address13'), type: 'error', duration: 3000});
        }
      },

      /**
       * @disc: 私钥导入账户提交
       * @params: formName
       * @date: 2019-08-31 16:01
       * @author: Wave
       */
      keyImport(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const newAddressInfo = nuls.importByKey(chainID(), this.importForm.keys, this.$md5(this.importForm.pass), this.prefix);
            let keyAddressInfo = defaultAddressInfo;

            keyAddressInfo.address = tronWeb.address.fromPrivateKey(this.importForm.keys);
            keyAddressInfo.aesPri = newAddressInfo.aesPri;
            keyAddressInfo.pub = newAddressInfo.pub;

            localStorageByAddressInfo(keyAddressInfo);

            this.toUrl('address')
          } else {
            return false;
          }
        });
      },

      /**
       * @disc: 创建账户提交
       * @params: formName
       * @date: 2019-08-31 16:01
       * @author: Wave
       */
      newAddressSubmitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.newAddressInfo = nuls.newAddress(chainID(), this.$md5(this.newAddressForm.pass), this.prefix);
            let newAddressInfos = defaultAddressInfo;
            const pri1111 = nuls.decrypteOfAES(this.newAddressInfo.aesPri, this.$md5(this.newAddressForm.pass));
            newAddressInfos.address = tronWeb.address.fromPrivateKey(pri1111);
            // tronWeb.address.fromPrivateKey('')
            newAddressInfos.aesPri = this.newAddressInfo.aesPri;
            newAddressInfos.pub = this.newAddressInfo.pub;
            localStorageByAddressInfo(newAddressInfos);
            this.$router.push({
              name: "backupsAddress",
              query: {'backAddressInfo': newAddressInfos}
            })
            // console.log('新创建的地址：',newAddressInfos)
          } else {
            return false;
          }
        });
      },

      /**
       * @disc: 连接跳转
       * @params: name
       * @date: 2019-09-02 11:12
       * @author: Wave
       */
      toUrl(name, type = 0) {
        if (type === 0) {
          this.$router.push({
            name: name
          })
        } else {
          connectToExplorer('nuls', name);
        }
      },
    }
  }
</script>

<style lang="less">
  .import-address {
    .bg-white {
      height: 130px;
    }
    .new_import {
      margin: -90px auto 100px;
      .el-tabs__header {
        margin: 0;
        .el-tabs__nav-wrap {
          text-align: center;
          &:after {
            height: 1px;
          }
        }
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            float: none;
            .el-tabs__active-bar {
              height: 0;
            }
            .el-tabs__item {
              text-align: center;
              padding: 0 25px;
              margin: 10px 20px 20px;
              border-radius: 4px;
              &:hover {
                background: linear-gradient(to right, #dd292b, #dd292b);
                color: #FFFFFF;
              }
            }
            .is-active {
              background: linear-gradient(to right, #dd292b, #dd292b);
              color: #FFFFFF;
            }
          }
        }
      }
      .el-tabs__content {
        background-color: #FFFFFF;
        .upload_keystore {
          padding: 100px 0 100px 0;
          border: 1px solid #E4E7ED;
        }
        .form-bnt {
          text-align: center;
          .el-button--success {
            background-color: #de2a2c;
            border-color: #de2a2c;
            width: 190px;
          }
        }
        .tab {
          border: 1px solid #E4E7ED;
          .import-form {
            margin: 60px auto 100px;
          }
        }
        .scan {
          width: 100%;
          min-height: 500px;
          margin: 0 auto;
          padding: 80px 0 0 0;
          border: 1px solid #E4E7ED;
          .qrcode {
            width: 250px;
            margin: 0 auto;
          }
        }
        .new_address {
          border: 1px solid #E4E7ED;
          .w630 {
            margin: 60px auto 100px;
          }
        }
      }
    }
  }
</style>
